<script lang='ts' setup>
import { ref } from 'vue';
import { Plus, Search, Refresh } from '@element-plus/icons-vue';
import { useRoute } from 'vue-router';
import AddUserDialog from "@/views/userManage/components/editorUserDialog/addUser/index.vue"
import EditUserDialog from "@/views/userManage/components/editorUserDialog/editUser/index.vue"
import { deleteUser, getUserList } from '@/api/userManage';
import { ElMessage, ElMessageBox } from 'element-plus';
import { PageInterface } from '@/api/common';
const route = useRoute();
const queryForm = ref({
    account: '',
    username: ''
})
const pagination = ref<PageInterface>({
    page: 1,
    limit: 10
})
const list = ref([])
const total = ref(0)

const addUserVisible = ref(false)
const editUserVisible = ref(false)
const editUserId = ref('')
function getList() {
    getUserList({
        ...pagination.value,
        ...queryForm.value
    }).then(res => {
        list.value = res.data.list
        total.value = res.data.totalCount;
    })
}
function reSearch() {
    queryForm.value = {
        account: '',
        username: ''
    }
    getList();
}
function closeUserDialog() {
    addUserVisible.value = false;
    editUserVisible.value = false;
    editUserId.value = ''
    getList();
}

function handleEditUser(id: string) {
    editUserId.value = id;
    editUserVisible.value = true;
}
function handleDeleteUser(id: string) {
    ElMessageBox.confirm('是否确认删除该条数据?', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        deleteUser(id).then(res => {
            ElMessage.success('删除成功')
            getList()
        })
    }).catch(() => { })
}
getList();
</script>
<template>
    <div class="pageTitle">{{ route.meta.title }}</div>
    <el-form inline :model="queryForm" @submit.prevent>
        <el-form-item label="姓名：" prop="username">
            <el-input v-model="queryForm.username" @keyup.enter="getList" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="账号：" prop="account">
            <el-input v-model="queryForm.account" @keyup.enter="getList" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
            <el-button type="primary" :icon="Refresh" @click="reSearch">重置</el-button>
        </el-form-item>
    </el-form>
    <div class="tableOperBtns">
        <el-button type="primary" :icon="Plus" @click="addUserVisible = true">新增</el-button>
    </div>
    <el-table empty-text="暂无数据" :data="list" style="width: 100%" border class="table">
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column prop="account" label="账号"></el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="" label="操作">
            <template #default="scope">
                <el-button type="primary" link @click="handleEditUser(scope.row.id)">编辑</el-button>
                <el-button type="danger" link @click="handleDeleteUser(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="pagination.page" @change="getList" background layout="prev, pager, next"
        :total="total" class="pagePagination" />

    <!-- 添加用户弹窗 -->
    <add-user-dialog :visible="addUserVisible" @close="closeUserDialog" />
    <!-- 编辑用户弹窗 -->
    <edit-user-dialog :id="editUserId" :visible="editUserVisible" @close="closeUserDialog" />
</template>
<style scoped lang='scss'></style>